<!--
 * @Author: zhoufei 415770319@qq.com
 * @Date: 2025-03-20 14:00:06
 * @LastEditors: zhoufei 415770319@qq.com
 * @LastEditTime: 2025-03-20 15:15:22
 * @FilePath: /ai_news/src/prototype/index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智享生活管家 - 原型预览</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-3xl font-bold mb-8">AI 智享生活管家 - 界面原型</h1>
        
        <!-- 首页模块 -->
        <section class="mb-12 p-8 border-2 border-blue-200 rounded-xl bg-white/50">
            <h2 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-home text-blue-500 mr-3"></i>首页模块
            </h2>
            <div class="grid grid-cols-2 gap-8">
                <!-- 首页预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">首页</h3>
                    <div class="device-frame">
                        <iframe src="pages/home.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 资讯详情预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">资讯详情</h3>
                    <div class="device-frame">
                        <iframe src="pages/news-detail.html" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能模块 -->
        <section class="mb-12 p-8 border-2 border-green-200 rounded-xl bg-white/50">
            <h2 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-th-large text-green-500 mr-3"></i>功能模块
            </h2>
            <div class="grid grid-cols-3 gap-8">
                <!-- 功能中心预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">功能中心</h3>
                    <div class="device-frame">
                        <iframe src="pages/features.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 读书笔记预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">读书笔记</h3>
                    <div class="device-frame">
                        <iframe src="pages/reading-notes.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 备忘录预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">备忘录</h3>
                    <div class="device-frame">
                        <iframe src="pages/notes.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 天气预览 -->
                <div class="prototype-container mt-8">
                    <h3 class="text-xl font-semibold mb-4">天气</h3>
                    <div class="device-frame">
                        <iframe src="pages/weather.html" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </section>

        <!-- 个人中心模块 -->
        <section class="p-8 border-2 border-purple-200 rounded-xl bg-white/50">
            <h2 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-user text-purple-500 mr-3"></i>个人中心模块
            </h2>
            <div class="grid grid-cols-3 gap-8">
                <!-- 个人中心预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">个人中心</h3>
                    <div class="device-frame">
                        <iframe src="pages/profile.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 会员中心预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">会员中心</h3>
                    <div class="device-frame">
                        <iframe src="pages/vip.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 设置预览 -->
                <div class="prototype-container">
                    <h3 class="text-xl font-semibold mb-4">设置</h3>
                    <div class="device-frame">
                        <iframe src="pages/settings.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 隐私设置预览 -->
                <div class="prototype-container mt-8">
                    <h3 class="text-xl font-semibold mb-4">隐私设置</h3>
                    <div class="device-frame">
                        <iframe src="pages/privacy.html" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 关于我们预览 -->
                <div class="prototype-container mt-8">
                    <h3 class="text-xl font-semibold mb-4">关于我们</h3>
                    <div class="device-frame">
                        <iframe src="pages/about.html" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html> 
